<script setup>
import { ref } from "vue";

const count = ref(0);
</script>

<template>
  <div class="box">
    <div class="bottom">
      <div class="menus">
        <div class="flex">
          <div class="title">About Us</div>
          <div class="text">
            Leading the future of sustainable energy storage solutions with
            innovative technology and commitment to environmental
            responsibility.
          </div>
        </div>
        <div class="flex">
          <div class="title">Products</div>
          <div class="text">
            Universal Series
          </div>
          <div class="text">
            Commercial Solutions
          </div>
          <div class="text">
            Industrial Systems
          </div>
        </div>
        <div class="flex">
          <div class="title">Support</div>
          <div class="text">
            Technical Support
          </div>
          <div class="text">
            Documentation
          </div>
          <div class="text">
            Contact Us
          </div>
        </div>、
        <div class="flex">
          <div class="title">Connect</div>
          <div class="icons">
            <img class="in" src="../assets/images/in.png" alt="" />
            <img class="niao" src="../assets/images/niao.png" alt="" />
            <img class="feishu" src="../assets/images/feishu.png" alt="" />
          </div>
        </div>
      </div>
    </div>
    <div class="version">
        © 2025 Universal Battery Technology. All rights reserved.
      </div>
  </div>
</template>

<style scoped>
.box {
  background: #111827;
  padding: 64px 0;
}
.bottom {
  width: 80%;
  margin: 0 auto;
  display: flex;
  font-family: Roboto;
  margin-bottom: 60px;
}
.bottom .menus{
    display: flex;

}
.bottom .menus .flex{
    flex: 1;
}
.flex .title{
    color: #FFFFFF;
    font-size: 20px;
    margin-bottom: 16px;
}
.flex .text{
    color: #9CA3AF;
    font-size: 16px;
    line-height: 30px;
    margin-bottom: 16px;
}
.flex .icons{
    display: flex;
    align-items: center;
}
.flex .icons .in{
    width:21px;
    height:32px;
}
.flex .icons .niao{
    width:24px;
    height:20px;
    margin-left: 16px;
}
.flex .icons .feishu{
    width:24px;
    height:20px;
    margin-left: 16px;
}
.version {
    width:100%;
    text-align: center;
    color: #9ca3af;
    font-size: 16px;
}
</style>
